<template>
	<div class="main" ref='remove'>
		<div class="univDetailWrap" ref='btnImg'>
			<div class="back">
				<go-back aa='../volunteer/balance'  :bb='btyep' :white='!syStyle'></go-back>
			</div>
			<scroller ref='scrollerBottom' style="top: 46px;">
				<div>
					<div class="univDetail">
						<div class="topWrap" ref='boxHeight'>
							<div :class="['univBar',collsMuen?'univCollHei':'']">
								<div class="univTopBar flex-h" style="align-items:initial">
									<div class="left">
										<img class="leftImg" :src="univData.icon" alt="">
									</div>
									<div class="right flex1">
										<span class="sp1" :style="schoolName.length>6?'font-size: 0.34rem;':'font-size: 0.4rem;'">{{schoolName}}</span>
										<span class="sp2">{{univData.feature}}</span>
									</div>
									<span  @click="follow(univData)" :class="['sp0', univData.followStatus?'sp3':'sp4']">{{univData.followStatus===1?'+关注':'已关注'}}</span>
								</div>
								<div class="univBotBar" v-show="showBot">
									<span class="flex-h univspn">

										<img class="imgIcon" src="~/static/iconsvgs/college_icon_phone2.png" alt="">
										
									<a class="flex1" v-if="commonJs.checkTerminal() == 'ios' || commonJs.checkTerminal() == 'android'" @click="call(univData.telephone)">{{univData.telephone}}</a>
									<a class="flex1" v-else :href="'tel://'+univData.telephone">{{univData.telephone}}</a>

									</span>
									<span class="flex-h univspn">
										<img class="imgIcon" src="~/static/iconsvgs/college_icon_add2.png" style="width: 0.26rem;" alt="">

										<b style="margin-left: 0.16rem;" class="flex1">{{schoolAdress}}</b>
									</span>
									<span class="flex-h univspn" @click="goweb(schoolWeb)">

										<img class="imgIcon" src="~/static/iconsvgs/college_icon_network2.png" style="width: 0.3rem;height: 0.3rem;" alt="">

										<b style="margin-left: 0.16rem;line-height: 0.3rem;word-wrap:break-word" class="flex1">{{schoolWeb}}</b>
									</span>
								</div>
							</div>
							<div class="collagesBox flex-h" @click="crimp">
								<span class="flex1 co1">联系方式</span>
								<span class="co2">
									<img class="imgIcon" :src="collsMuen?collsimg1:collsimg2" alt="">


								</span>
							</div>

						</div>


						<div ref='tabsHegiht' :class="syStyle==true">
							<div class="botWrap">
								<div class="tabs flex-h">

									<span class="flex1" v-for="(item,index) in tabs" :class="{active:index == num}" @click="num=index,tabChange('select' + (index + 1))"
									 :key="index">{{item.title}}</span>

								</div>
							</div>
						</div>
						<div class="tabCon" style="min-height:70vh ;background: #fff;">
							<keep-alive>
								<component v-bind:is="tabView"></component>
							</keep-alive>
						</div>
					</div>
					<div style="width: 100%;height: 46px;"></div>
				</div>
			</scroller>

		</div>
		<select-news :show8="shows" v-on:clearFatherObj1="clearFatherObj2"></select-news>




		<div v-show="tabView==='select1'" class="fixedBarBtn" @click="shows=true">2019年招生计划</div>
		<div v-show="syStyle==false" style="position: fixed;left: 0;top: 46px;width: 7.5rem;">

			<div class="botWrap1">
				<div class="tabs1 flex-h">

					<span class="flex1" v-for="(item,index) in tabs" :class="{active:index == num}" @click="num=index,tabChange('select' + (index + 1))"
					 :key="index">{{item.title}}</span>

				</div>
		
			</div>
		</div>
	</div>
</template>
<script>
	import goBack from '~/components/goBack'
	import { academyServiceDetail, academyServiceFollowUser } from '~/api/college';
	import ls from 'store2';
	import select1 from '~/components/select1'
	import select2 from '~/components/select2'
	import select3 from '~/components/select3'
	import select4 from '~/components/select4'
	import selectNews from '~/components/selectNews1'
	import {
		Tab,
		TabItem
	} from 'vux'
	import {
		format
	} from '~/plugins/filter';
	export default {
		head() {
			return {
				title: '院校库'
			}
		},
		components: {
			Tab,
			TabItem,
			goBack,
			select1,
			select2,
			select3,
			select4,
			selectNews
		
		},
		created() {
		this.commonJs.gologins();
		},
		data() {
			return {
				btyep:'',
				showBot: false,
				collsimg1: require('~/static/iconsvgs/collage.png'),
				collsimg2: require('~/static/iconsvgs/college_icon_more_down.png'),
				abctest: [],
				schoolName: '',
				schoolAdress: '',
				schoolWeb: '',
				univData: [],
				univDesc: [],

				shows: false,
				tabs: [{
					title: '历史录取'
				}, {
					title: '院校简介'
				}, {
					title: '院系专业'
				}, {
					title: '答疑专区'
				}],
				tabView: 'select1',
				num: 0,
				tabIndex: 0,
				sss: '',
				isShow: false,

				syStyle: true, //滑动时的效果,使用v-bind:style="deleteSlider"
				collsMuen: false

			}
		},

		methods: {
			call(tel) {


				if (this.commonJs.checkTerminal() == 'ios') {
					
					window.webkit.messageHandlers.CallTelephone.postMessage(tel)
				} else if(this.commonJs.checkTerminal() == 'android'){
					ZMParentsJsToAndroid.CallTelephone(tel)
					setTimeout(() => {
						this.blurAdjust()
					}, 50)
				};


			},
			goweb(website) {
			
				// window.location.replace(website)
			},

			//安卓,IOS方法



			follow(datas) {
				academyServiceFollowUser({
					"academyCode": ls.get('applsData').academyCode + "",
					"action": datas.followStatus,
					"fromUserId": ls.get('applsData').userId
				}, true).then(res => {
					if (res.code === '0') {
						datas.followStatus === 1 ? datas.followStatus = 0 : datas.followStatus = 1
						let $index = this.$store.state.followIndex;
						let obData = JSON.parse(sessionStorage.getItem('yxkListData'))
						setTimeout(()=>{
						obData[$index].followStatus = datas.followStatus;
						sessionStorage.setItem('yxkListData',JSON.stringify(obData)	)
						},20)	
					}
				
					this.$vux.toast.text(res.message);
					
				
		
				}).catch((error) => {
					
					this.$vux.toast.text('服务器繁忙，请稍后再试');
				})
			},
			lsUnivDesc() {
				let items = this.$route.query.type;
				setTimeout(() => {
					ls.set('uivsData', items)
				}, 10)

			},
		
			showUnivDesc() {
				academyServiceDetail({
					"academyCode": ls.get('applsData').academyCode + "",
					"fromUser": ls.get('applsData').userId
				}, true).then(res => {
			
					if (res.code === '0') {
						this.univData = res.data
						this.schoolAdress = res.data.address;
						this.schoolWeb = res.data.website;
						this.schoolName = res.data.academyName
					}

				}).catch((error) => {
			
					this.$vux.toast.text('服务器繁忙，请稍后再试');
				})
			},
			clearFatherObj2() {
				this.shows = false
			},
			tabChange(tab) {
		
				this.tabView = tab;
			},
			tab(index) {
				this.num = index;
			},
			crimp() {
				this.showBot = !this.showBot
				this.collsMuen = !this.collsMuen;
				let _this = this;
				setTimeout(function() {
					_this.tabTops = _this.$refs.boxHeight.offsetHeight;

				}, 400)
			},
	

		},
		mounted: function() {
			this.btyep =  this.$route.query.type;
			this.showUnivDesc();
			this.tabTops = this.$refs.boxHeight.offsetHeight;	
			this.timer = setInterval(() => {
				let scrolly = this.$refs.scrollerBottom.getPosition().top
				if (scrolly > this.tabTops) {
					this.syStyle = false;
				} else {
					this.syStyle = true;
				}
			}, 50)
		},
		beforeDestroy() {
			clearInterval(this.timer)
		}

	}
</script>

<style scoped lang="less">
	.fixedBarBtn {

		width: 6.3rem;
		height: 0.8rem;
		background: rgba(255, 255, 255, 1);
		border-radius: 0.1rem;
		border: 1px solid rgba(104, 189, 26, 1);
		font-size: 0.3rem;
		font-weight: bold;
		color: rgba(108, 191, 32, 1);
		line-height: 0.8rem;
		text-align: center;
		position: fixed;
		bottom: 0.2rem;
		left: 0.6rem;
		display: none;
	}

	.univDetailWrap {
		width: 7.5rem;
		min-height: 100vh;
		height: auto;
		// background: #fff;
		background: #f3f3f3;

		.back {
			width: 100%;
			// 			padding: 0 0.3rem;
			// 			box-sizing: border-box;
		}

		.fixed1 {
			position: fixed;
			left: 0;
			top: 0;
		}

		.univDetail {
			width: 100%;
			height: auto;
			// min-height: 100vh;
			background: #fff;

			.topWrap {
				width: 100%;
				height: auto;
				padding: 0 0.3rem 0.4rem;
				box-sizing: border-box;
				background: #f3f3f3;

					.univBar {

					width: 6.9rem;
					// height: 2.24rem;
					height: auto;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 0px 20px 0px rgba(204, 204, 204, 0.3);
					border-radius: 0.2rem;
					overflow: hidden;
					transition: all 0.35s;

					.univTopBar {
						width: 6.9rem;
						// height: 2.24rem;
						height: auto;
						padding: 0 0.3rem 0.2rem;
						box-sizing: border-box;
						position: relative;

						.left {
							width: 1.5rem;
							height: 2.24rem;

							img {

								display: block;
								width: 1.2rem;
								height: 1.2rem;
								margin-top: 0.5rem;
								border-radius: 50%;
								border: none;
								background: url('~/static/iconheader.png') no-repeat;
								background-size: 100%;
							}
						}

						.right {
							// height: 2.24rem;
							height: auto;

							.sp1 {
								display: block;
								margin-top: 0.4rem;
								// font-size: 0.3rem;
								width: 3.7rem;
								height: auto;
								// background: red;
								font-family: 'PingFang-SC-Bold';
								font-weight: bold;
								color: rgba(34, 34, 34, 1);

							}

							.sp2 {
								display: block;
								font-size: 0.26rem;
								font-family: 'PingFang-SC-Bold';
								font-weight: bold;
								color: rgba(153, 153, 153, 1);
								line-height: 0.4rem;
								margin-top: 0.2rem;
							}
						}





						.sp0 {
							position: absolute;
							right: 0.3rem;
							top: 0.3rem;
							width: 1.1rem;
							height: 0.5rem;
							border-radius: 0.25rem;
							// border: 0.02rem solid rgba(108, 191, 32, 1);
							font-size: 0.26rem;
							font-family: 'PingFang-SC-Bold';
							font-weight: bold;
							// color: rgba(108, 191, 32, 1);
							line-height: 0.46rem;
							text-align: center;
						}

						.sp3 {
							color: #6CBF20;
							border: 0.02rem solid #6CBF20;
							box-sizing: border-box;
						}

						.sp4 {
							background: #FAFAFA;
							color: #BBBBBB;

						}
					}

					.univBotBar {
						width: 6.3rem;
						// height: 2.35rem;
						height: auto;
						padding: 0.2rem 0;
						box-sizing: border-box;
						background: rgba(250, 250, 250, 1);
						border-radius: 0.1rem;
						margin: 0 auto 0.2rem;
						overflow: hidden;

						.spBar {
							display: block;
						}

						span {

							padding-left: 0.3rem;
							box-sizing: border-box;
							margin-top: 0.15rem;
							height: 0.42rem;
							line-height: 0.42rem;

							.imgIcon {
								width: 0.32rem;
								height: 0.32rem;
								vertical-align: middle;
							}


							b,
							a {
								font-size: 0.26rem;
								font-family: 'PingFang-SC-Bold';
								// font-weight: bold;
								color: rgba(102, 102, 102, 1);
								// vertical-align: middle;
								line-height: 0.3rem;
								margin-left: 0.1rem;

							}

							a {
								text-decoration: none;
							}
						}

						.univspn {
							height: auto;
							align-items: initial;
						}
					}
				}

				.univCollHei {
					// height: 4.92rem;

					height: auto;

				}

				.collagesBox {
					width: 6.7rem;
					background: rgba(137, 204, 78, 1);
					height: 0.6rem;
					border-bottom-left-radius: 0.2rem;
					border-bottom-right-radius: 0.2rem;
					margin: 0 auto;
					padding: 0 0.3rem;
					box-sizing: border-box;

					.co1 {
						font-size: 0.3rem;
						font-family: 'PingFang-SC-Bold';
						font-weight: bold;
						color: rgba(255, 255, 255, 1);

					}

					.co2 {
						overflow: hidden;
						.imgIcon {
							width: 0.4rem;
							height: 0.4rem;
							margin-top: 0.1rem;
						}
					}
				}
			}
		}

		.univDescPp {
			width: 100%;
			height: auto;
			padding: 0.1rem;
			box-sizing: border-box;

			span {
				font-size: 0.26rem;
			}
		}
	}

	.botWrap {
		width: 100%;
		height: auto;
		padding: 0 0.3rem;
		box-sizing: border-box;
		background: #f3f3f3;
		z-index: 2;

		.tabs {
			width: 100%;
			height: 0.7rem;

			// background: yellow;
			span {
				font-size: 0.3rem;
				text-align: center;
				font-weight: bold;
				color: #BBBBBB;
				height: 0.7rem;
				line-height: 0.7rem;
			}

			.active {
				color: #1D1E22;
				background: rgba(255, 255, 255, 1);
				// box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
				border-radius: 0.1rem 0.1rem 0px 0px;

			}
		}

	}

	.botWrap1 {
		width: 100%;
		height: 46px;
		padding: 0 0.3rem;
		box-sizing: border-box;
		background: #fff;
		z-index: 2;

		.tabs1 {
			width: 100%;
			height: 46px;

			// background: yellow;
			span {
				font-size: 0.3rem;
				text-align: center;
				font-weight: bold;
				color: #BBBBBB;
				height: 46px;
				line-height: 46px;
				position: relative;
			}

			.active {
				color: #1D1E22;
			}

			.active::after {

				content: '';
				display: block;
				width: 20%;
				height: 4px;
				background: #89cc4e;
				position: absolute;
				bottom: 0;
				left: 40%;


			}
		}

	}
</style>
